<template>
    <div>
        <h1>新增员工</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">姓名</td>
                    <td><input type="text" v-model="info.userName"></td>
                </tr>
                <tr>
                    <td align="right">员工编号</td>
                    <td><input type="text" v-model="info.userId"></td>
                </tr>
                <tr>
                    <td align="right">头像</td>
                    <td><input type="file" @change="img">
                        <img :src="info.photo" width="60" height="60" v-if="info.photo!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">手机号码</td>
                    <td><input type="text" v-model="info.tel"></td>
                </tr>
                <tr>
                    <td align="right">角色</td>
                    <td>
                        <select v-model="info.roleId">
                            <option value="">请选择</option>
                            <option v-for="item in roles" :value="item.roleId">{{ item.roleName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">登录密码</td>
                    <td><input type="password" v-model="info.userPwd"></td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" v-model="info.userState" name="state" :value="1">启用
                        <input type="radio" v-model="info.userState" name="state" :value="2">禁用
                    </td>
                </tr>
                <tr>
                    <td align="right">备注</td>
                    <td><input type="text" v-model="info.userDesc"></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="添加" @click="adduser" class="btn btn-primary"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import moment from "moment";
import {useRouter,useRoute} from "vue-router";
const router=useRouter();
const route=useRoute();
onMounted(()=>
{
    bindrole();
})
let info:any=reactive({
  "userId": moment(new Date()).format('yyyyMMdd')+Math.random().toString().substring(2,5),
  "userName": "",
  "photo": "",
  "tel": "",
  "roleId": "",
  "userPwd": "",
  "userState": "",
  "userDesc": "",
})
const adduser=()=>
{
    if(info.userName=="")
    {
        alert("姓名不能为空");
        return;
    }
    if(info.photo=="")
    {
        alert("手机号不能为空");
        return;
    }
    if(info.userPwd=="")
    {
        alert("密码不能为空");
        return;
    }
    axios({
        url:'http://localhost:5086/api/User/AddUser',
        method:'post',
        data:info
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data==-1)
        {
            alert("姓名不唯一");
            return;
        }
        if(res.data>0)
        {
            alert("新增员工成功");
            router.push('/showuser')
            return;
        }
        else
        {
            alert("新增员工失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
let roles:any=ref([]);
const bindrole=()=>
{
    axios({
        url:'http://localhost:5086/api/User/BindRole',
        method:'get',
    })
    .then((res)=>
    {
        console.log(res);
        roles.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
const img=(e:any)=>
{
    var obj=e.target.files[0];
    let f=new FormData();
    f.append("file",obj);
    axios({
        url:'http://localhost:5086/api/User/Upload',
        method:'post',
        data:f
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data=="不是图片")
        {
            alert("您选择的不是图片");
            return;
        }
        if(res.data=="大于2M")
        {
            alert("您选择的图片大于2M");
            return;
        }
        info.photo=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
</script>

<style scoped>

</style>